<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>地磁信号模拟测试</title>
    <!-- 引入css -->
    <link rel="stylesheet" th:href="@{/modules/bootstrap/bootstrap.css}">
</head>
<body style="padding:10px;">

    <!-- 报文配置区域 -->
    <table class="table table-striped table-bordered" style="width: 50%;margin:0 auto;">
        <caption class="text-center">地磁模拟报文配置</caption>
        <thead>
            <tr>
                <th>字段名称</th>
                <th>说明</th>
                <th>值</th>
            </tr>
        </thead>

        <tbody>

            <tr>
                <td>报文类型</td>
                <td>区分不同报文类型</td>
                <td>
                    <select class="form-control" id="type" name="type">
                        <option value="32">普通报文（0x20）</option>
                        <option value="33">心跳报文（0x21）</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td rowspan="4">版本</td>
                <td>程序版本，示例：14</td>
                <td>
                    <input type="text" class="form-control" id="programVersion" name="programVersion" />
                </td>
            </tr>

            <tr>
                <td>协议类型</td>
                <td>
                    <input type="text" class="form-control" id="agreementType" data-value="000" name="agreementType" value="UDP"
                           disabled="disabled" readonly="readonly"/>
                </td>
            </tr>

            <tr>
                <td>运营商，示例：中国移动</td>
                <td>
                    <select class="form-control" id="operator" name="operator">
                        <option value="01">中国移动</option>
                        <option value="00">中国电信</option>
                        <option value="10">中国联通</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>心跳，示例：有心跳</td>
                <td>
                    <select class="form-control" id="heartbeat" name="heartbeat">
                        <option value="1">有</option>
                        <option value="0">无</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>地磁信号</td>
                <td>参考值，示例：13</td>
                <td>
                    <input type="text" class="form-control" id="magRssi" name="magRssi"/>
                </td>
            </tr>

            <tr>
                <td>事件时间</td>
                <td>事件发生时间相对于1970-1-1经过的秒总数，示例：2018-11-05 09:14:27</td>
                <td>
                    <input type="text" class="form-control" id="nowTime" name="nowTime" placeholder="yyyy-MM-dd hh:mm:ss"/>
                </td>
            </tr>

            <tr>
                <td>地磁状态</td>
                <td>0:无车 1：有车，示例：01</td>
                <td>
                    <select class="form-control" id="state" name="state">
                        <option value="1">有车</option>
                        <option value="0">无车</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>批次号</td>
                <td>停车批次号，示例：00</td>
                <td>
                    <input type="text" class="form-control" id="packCount" name="packCount" disabled="disabled"
                           readonly="readonly"/>
                </td>
            </tr>

            <tr>
                <td>地磁电量</td>
                <td>地磁一共 0-7 档，示例：7</td>
                <td>
                    <select class="form-control" id="magVoltage" name="magVoltage">
                        <option value="7">7（95%~100%）</option>
                        <option value="6">6（90%~95%）</option>
                        <option value="5">5（80%~90%）</option>
                        <option value="4">4（70%~80%）</option>
                        <option value="3">3（50%~70%）</option>
                        <option value="2">2（30%~50%）</option>
                        <option value="1">1（10%~30%）</option>
                        <option value="0">1（0%~10%）</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>地磁编号</td>
                <td>地磁唯一编码，示例：18103037</td>
                <td>
                    <input type="text" class="form-control" id="magId" name="magId"/>
                </td>
            </tr>

            <tr>
                <td>地磁信号</td>
                <td>地磁信号强度，示例：-78。负号用1替换</td>
                <td>
                    <input type="text" class="form-control" id="signalPower" name="signalPower"/>
                </td>
            </tr>

            <tr>
                <td>发送数据</td>
                <td colspan="2">
                    <input type="text" class="form-control" id="resultHex" name="resultHex" readonly="readonly"/>
                </td>
            </tr>

        </tbody>

        <tfoot>
            <tr>
                <td colspan="3" class="text-center">
                    <input id="sendHexData" type="button" class="btn btn-primary" style="width: 100px;" value="发送" />
                </td>
            </tr>
        </tfoot>
    </table>

    <!-- 服务器启动面板 -->
    <div style="width: 260px; height: 228px; position: fixed; top: 35%; right: 15px;">
        <table class="table table-striped table-bordered">
            <thead>
                <tr>
                    <td colspan="2" class="text-center">连接服务器</td>
                </tr>
                <tr>
                    <th>属性</th>
                    <th>值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>IP地址</td>
                    <td>
                        <input type="text" id="ip" name="ip" class="form-control" />
                    </td>
                </tr>
                <tr>
                    <td>端口</td>
                    <td>
                        <input type="text" id="port" name="port" class="form-control" />
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="2" class="text-center" th:switch="${linkStatus}">
                        <span th:case="0"><input type="button" class="btn btn-primary" id="link" name="link" style="width: 150px;" value="连接"/></span>
                        <span th:case="1"><input type="button" class="btn btn-primary" id="link" name="link" style="width: 150px;" disabled="disabled" value="连接"/></span>
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>

    <!-- 引入js -->
    <script type="text/javascript" th:src="@{/modules/jquery/jquery.js}"></script>
    <script type="text/javascript" th:src="@{/modules/lay/laydate/laydate.js}"></script>
    <script type="text/javascript" th:src="@{/modules/lay/layer/layer.js}"></script>
    <script type="text/javascript" th:src="@{/modules/customize/CRC16.js}"></script>

    <!-- 自定义方法 -->
    <script type="text/javascript">
        function formatHex(dec, byte, decType) {
            if (decType == null) {
                decType = true;
            }
            var hex = (decType ? dec.toString(16) : dec) + '';
            hex = ((decType && hex == dec) ? parseInt(dec, 2).toString(16) : hex) + '';
            hexLen = hex.length;
            var len = decType ? byte * 2 : byte;
            if (hexLen < len) {
                for (var i = 0; i < len - hexLen; i++) {
                    hex = '0' + hex;
                }
            }
            return hex;
        }
    </script>

    <!-- 操作 -->
    <script type="text/javascript">
        $(function() {

            //开启公历节日
            laydate.render({
                elem: '#nowTime',
                type: 'datetime',
                calendar: true
            });

            // 连接服务器
            $('#link').click(function () {
                var $ip = $('#ip').val();
                var $port = $('#port').val();

                if (!$ip && !$port) {
                    layer.msg('ip/端口 必填！', {icon: 2});
                    return;
                }

                $.ajax({
                    url: '/startUdpClient',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        'ip' : $ip,
                        'port' : $port
                    },
                    beforeSend: function(){
                        // 禁用按钮防止重复提交
                        $("#link").attr({ disabled: "disabled" });
                    },
                    success : function (data) {
                        if (data.status == 'ERROR') {
                            layer.msg(data.msg, {icon: 2});
                        }
                    },
                    error: function (data) {
                        $("#link").removeAttr("disabled");
                    }
                });
            });

            // 发送数据
            $('#sendHexData').click(function () {

                // region 生成数据

                var $type = $('#type').val() * 1;

                var $programVersion = $('#programVersion').val() * 1;
                var $agreementType = $('#agreementType').data('value') * 1;
                var $operator = $('#operator').val() * 1;
                var $heartbeat = $('#heartbeat').val() * 1;
                // 二进制
                var $version =　formatHex($programVersion.toString(2), 8, false) + '00' + formatHex($agreementType, 3, false) + formatHex($operator, 2, false) + $heartbeat;

                var $magRssi = $('#magRssi').val() * 1;
                var $nowTime = new Date($('#nowTime').val()).getTime() / 1000;
                var $state = $('#state').val() * 1;
                var $magVoltage = $('#magVoltage').val() * 1;
                var $magId = $('#magId').val() * 1;
                var $signalPower = $('#signalPower').val() * 1;

                if (!$magId || isNaN($magId)) {
                    layer.msg('请填写地磁编号！', {icon: 2});
                    return;
                }

                var lastPackCount = localStorage.getItem('COUNT_' + $magId) * 1;
                var $packCount = lastPackCount + 1;
                $('#packCount').val($packCount);
                localStorage.setItem('COUNT_' + $magId, $packCount);

                var resultHex = (formatHex($type, 1)
                                + formatHex($version, 2)
                                + $magRssi
                                + '00000000000000'
                                + formatHex($nowTime, 8)
                                + formatHex($state, 4)
                                + ($packCount > 15 ? formatHex($packCount, 2) : formatHex($packCount + '', 4, false))
                                + ('0' + $magVoltage)
                                + formatHex($magId, 4)
                                + formatHex($signalPower, 1)
                                + '0000').toUpperCase();
                resultHex += CRC.ToModbusCRC16(resultHex, true);

                $('#resultHex').val(resultHex);

                // endregion

                // region 发送数据

                $.ajax({
                    url: '/sendHexData',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        'hexData' : resultHex
                    },
                    beforeSend: function(){
                        // 禁用按钮防止重复提交
                        $("#sendHexData").attr({ disabled: "disabled" });
                    },
                    success : function (data) {
                        $("#sendHexData").removeAttr("disabled");

                        if (data.status == 'ERROR') {
                            layer.msg(data.msg, {icon: 2});
                        }
                    },
                    error: function (data) {
                        $("#sendHexData").removeAttr("disabled");
                    }
                });

                // endregion
            });
        });

    </script>

</body>
</html>